<template>
  <span :class="classes" >
    <slot></slot>
  </span>
</template>

<script>
  export default {
    props: {
      negative: {
        type: Boolean
      }
    },
    computed: {
      classes () {
        return {
          'state-tip': true,
          'negative': this.negative
        }
      }
    }
  }
</script>

<style lang="scss">
  .state-tip{
    display: inline-block;
    vertical-align: top;
    padding:4px 8px;
    margin-left: 8px;
    line-height: 14px;
    border:solid 1px #fc6f00;
    color: #fc6f00;
    &.negative{
      border-color:#999999;
      color: #999999;
    }
  }
</style>
